//useMemo解决子组件重复调用的问题 在组件更新之前阻止更新 shouldComponentUpdate
//父组件更新，子组件也会跟着更新
//可以缓存属性 或者是状态

import React,{useState,useMemo} from 'react';

function ExampleUseDemo(){
    const [xiaohong,setXiaohong] = useState('小红正在待客状态')
    const [zhiling,setZhiling] = useState('志林正在待客状态')

    return(
        <>
            <button onClick={()=>{setXiaohong(Date.now())}}>小红</button>
            <button onClick={()=>{setZhiling(Date.now() + '志林向我们周来')}}>志林</button>
            <ChildComponent name={xiaohong}>{zhiling}</ChildComponent>
        </>
    )
}

function ChildComponent({name,children}) {
    //每次点击组件，这个方法都会运行，就为了解决这个问题
    function changeXiaohong(params) {
        console.log('她来，他来了，小红向我们走来了')
        return name + '小红向我们走来了'
    }
    //变化后的小红,只有[name] 表示只有name 发生变化时执行
    const actionXiaohong = useMemo(()=>changeXiaohong(name),[name])
    
    return(
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}

export default ExampleUseDemo;